<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text指令学习</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <!--
    功能:
        使用v-text指令来替换元素的内容.
    注意:
        1. v-text指令会直接替换选定元素的整个内容.
            - 所以, 如果只需要替换局部, 使用{{}}更好.
    -->
    <h2 v-text="message">这个内容会被覆盖掉</h2>
    <h2>西安, {{message}}</h2>

    <!--
    功能:
        进行字符串拼接.
    说明:
        1. 如果使用v-text, 则只能使用单引号;
        2. 差值表达式更加自由, 想使用那个就用哪个.
    -->
    <h2 v-text="message + '!'">这个内容会被覆盖掉</h2>
    <h2>西安, {{message + "!" + '!'}}</h2>
</div>
</body>
<script>

    let app1 = new Vue({
        el: '#app',
        data: {
            message: 'hello'
        }
    });

</script>
</html>